<!-- 1. 引入vue -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>


<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- https://element.eleme.cn/#/zh-CN/component/installation PC组件库 -->
<!-- https://vant-contrib.gitee.io/vant/#/zh-CN/coupon-list  手机端组件库 -->

<!-- 2. 最外层的div 带有id  -->
<div id="app">
    hello world {{msg}}
    
    <el-button type="primary" @click="notifyDrawer()" >别动我</el-button>
    <el-badge :value="num" class="item">
        <el-button type="warning" @click="notify()" >警告按钮</el-button>
    </el-badge>
    
    <!-- <button onclick="notify()" >hi</button> -->


    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
    >
        <span>这是一段信息</span>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>

    </el-dialog>


    <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="drawerHandleClose"
    >
        <span>我来啦!</span>
    </el-drawer>

</div>


<script>

    function notify(){
        alert("hi")
    }

    var Main = {
        data() {
          return {
            msg: "hello 付雨欣",
            num: 0,
            dialogVisible: false,
            drawer: false,
            direction: 'rtl',
          }
        },
        methods: {
            notifyDrawer(){
                this.drawer = true;

            },
            notify(){
                // alert("hi")
                
                this.num ++;
                this.dialogVisible = true;

                this.$notify({
                    title: '成功',
                    message: '这是一条成功的提示消息',
                    type: 'success'
                });
            },

            handleClose(){
                this.dialogVisible = false
            },

            drawerHandleClose(){
                this.drawer = false
            }
        }
      };
    //  3. 创建一个vue对象 , 通过id绑定dom 
    var Demo = Vue.extend(Main)
    new Demo().$mount('#app')
    
</script>